import '../styles/MyList.scss'
import pic2 from '../assets/pic2.jpg'

import React, { Component } from 'react';

class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: ['综合', '销量', '新品', '价格', '筛选'],
            goods: [{ pic2, name: 'COSME DECORTE黛珂植物欣韵沁莹化妆水20', price: '原价￥270', sell: '活动价￥217' }, { pic2, name: 'COSME DECORTE黛珂牛油果乳液150ml', price: '原价￥273', sell: '活动价￥205' }, { pic2, name: 'COSME DECORTE黛珂植物欣韵沁莹化妆水20', price: '原价￥270', sell: '活动价￥217' }, { pic2, name: 'COSME DECORTE黛珂牛油果乳液150ml', price: '原价￥273', sell: '活动价￥205' },]
        }
    }

    render() {
        return (
            <div className='list'>
                <div className="box" >
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className="one" key={index}>{item}</div>
                            )
                        })
                    }
                </div>
                <div className="box2">
                    {
                        this.state.goods.map((item, index) => {
                            return (
                                <div className="good" key={index}>
                                    <img src={pic2} alt="" />
                                    <h5>{item.name}</h5>
                                    <p>{item.price}</p>
                                    <h6>{item.sell}</h6>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyList;